<!-- 用户详情 -->
<template>
    <div class="totalDiv">
        <div class="avatarDiv">
            <pan-thumb :image="userInfo.avatar" />
            <el-button
                type="primary"
                icon="el-icon-upload"
                class="avatarBtn"
                @click="imagecropperShow = true"
            >Change Avatar</el-button>
            <el-divider></el-divider>
            <el-form ref="form" :model="userInfo" label-width="80px" v-show="show">
                <el-form-item label="用户昵称">
                    <p>{{userInfo.nickname}}</p>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-tooltip class="item" effect="light" content="不可修改" placement="right">
                        <el-tag type="info">{{userInfo.mobile}}</el-tag>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="性别">
                    <el-tag v-if="userInfo.sex==2">男</el-tag>
                    <el-tag v-if="!userInfo.sex" type="info">未编辑</el-tag>
                    <el-tag v-if="userInfo.sex==1" type="danger">女</el-tag>
                </el-form-item>

                <el-form-item label="年龄">
                    {{userInfo.age?userInfo.age+" 岁":""}}
                    <el-tag v-if="!userInfo.age" type="info">未编辑</el-tag>
                </el-form-item>

                <el-form-item label="个性签名">
                    {{userInfo.sign}}
                    <el-tag v-if="!userInfo.sign" type="info">未编辑</el-tag>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" icon="el-icon-edit" @click="editUserInfo()">编辑</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button
                        type="text"
                        @click="$router.push({
                        path:'/teacherApplication'
                    });"
                    >
                        成为讲师
                        <i class="el-icon-s-promotion el-icon--right"></i>
                    </el-button>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="userForm" label-width="80px" v-show="!show">
                <el-form-item label="用户昵称">
                    <el-input v-model="userForm.nickname" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-tooltip class="item" effect="light" content="不可修改" placement="right">
                        <el-tag type="info">{{userForm.mobile}}</el-tag>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="性别">
                    <el-switch
                        v-model="userForm.sex"
                        active-color="#8a7eec"
                        inactive-color="rgb(252, 130, 223)"
                        active-text="男"
                        inactive-text="女"
                        active-value="2"
                        inactive-value="1"
                    >></el-switch>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input-number
                        v-model="userForm.age"
                        controls-position="right"
                        :min="0"
                        :max="200"
                    ></el-input-number>
                </el-form-item>

                <el-form-item label="个性签名">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userForm.sign"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" icon="el-icon-check" @click="commitEdit()">提交</el-button>
                    <el-button type="text" icon="el-icon-close" @click="cancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--上传头像-->
        <div class="user-avatar">
            <avatar-upload
                field="file"
                @crop-upload-success="cropUploadSuccess"
                @crop-upload-fail="cropUploadFail"
                v-model="imagecropperShow"
                :width="300"
                :height="300"
                :url="BASE_API"
                img-format="png"
            ></avatar-upload>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cookie from "js-cookie";
import PanThumb from "@/components/PanThumb";
import { updateUser } from "@/api/ucenter/user";
export default {
    layout: "default",
    //import引入的组件需要注入到对象中才能使用
    components: { PanThumb },
    data() {
        //这里存放数据
        return {
            show: true,
            userInfo: {
                id: "",
                openId: "",
                mobile: "",
                nickname: "",
                sex: "",
                age: "",
                avatar: "",
                sign: "",
                isDisabled: "",
                teacherId: "",
            },
            userForm: {
                sex: 2,
            },
            imagecropperShow: false,
            imagecropperKey: 0,
            BASE_API: "http://localhost:20000/oss/uploadPhoto",
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getUserInfo() {
            var jsonStr = cookie.get("edu_user");
            if (jsonStr) {
                this.userInfo = JSON.parse(jsonStr);
            }
        },
        cropUploadSuccess(resData) {
            this.userInfo.avatar = resData.data.url;
        },
        cropUploadFail() {},
        editUserInfo() {
            this.show = false;
            this.userForm = this.userInfo;
            this.userForm.sex = 2;
        },
        commitEdit() {
            this.userInfo = this.userForm;
            updateUser(this.userInfo).then((response) => {
                cookie.set("edu_token", response.data.token, {
                    domain: "localhost",
                });
                cookie.set("edu_user", this.userInfo, {
                    domain: "localhost",
                });
                this.userForm = {};
                this.show = true;
            });
        },
        cancel() {
            this.show = true;
            this.userForm = {};
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getUserInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
.totalDiv {
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatarDiv {
    width: 35%;
}
.avatarBtn {
    position: absolute;
    left: 45%;
    top: 25%;
}

.p1 {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 40px;
    font-weight: bolder;
}
</style>